<template>
	<view class="navbar" :style="{ height: (statusBarHeight + navBarHeight) + 'px' }">
	    <view class="navbar-fixed" :style="{backgroundColor: color}">
				<!-- statusHeight 状态栏的高度  蓝色区块-->
				<view class="status_bar" :style="{ height: statusBarHeight + 'px' }"></view>
				<!-- navcontent tabbar导航栏高度 绿色区块-->
				<view class="nav_content" :style="{ height: navBarHeight + 'px' }">
				<slot>
				</slot>
			</view>
	    </view>
	</view>
</template>

<script>
	
	export default {
		name:"navbar",
		props: {
			color: {
				type: String,
				default: 'transparent'
			},
			textColor: {
				type: String,
				default: '#000'
			}
		},
		data(){
		    return {
		        statusBarHeight:20,//状态栏的高度系统默认20px 
		        menuBarHeight:32,//微信胶囊的高度
		        navBarHeight:44,//uniapp 默认的高度是44（这里默认高度也就是H5导航栏的高度） 根据公式计算的高度不是固定值44
		    }
		},
		mounted(){
		    const res = uni.getSystemInfoSync();
		    this.statusBarHeight = res.statusBarHeight;
		    //获取胶囊位置信息
		    const menuBottonInfo = uni.getMenuButtonBoundingClientRect();
		    //微信胶囊的高度
		    this.menuBarHeight = menuBottonInfo.height;
		    // 胶囊底部 - 状态栏 + 胶囊顶部 - 状态栏 = 导航栏的高度（胶囊距离顶部的距离+胶囊距离底部距离+胶囊自身的高度）
		    this.navBarHeight = menuBottonInfo.bottom - res.statusBarHeight + (menuBottonInfo.top - res.statusBarHeight);
		},
		computed: {
		},
	}
</script>

<style lang="scss">
	.navbar {
		width: 100%;
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		.navbar-fixed {
			width: 100%;
		}
	}
	.nav_content {
		display: flex;
		flex-direction: row;
		flex: 1;
		overflow: hidden;
		align-items: center;
	}
	.logo-wrap {
		margin-left: 30rpx;
		image {
			height: 50rpx;
			width: 50rpx;
			border-radius: 25rpx;
			vertical-align: middle;
		}
	}
	.logo-text {
		font-size: 32rpx;
		font-weight: 700;
		margin-left: 20rpx;
	}
	.arrow {
		color: #8a8a8a;
		margin-top: 6rpx;
		margin-left: 20rpx;
		font-size: 20rpx;
	}
</style>